<template>
  <el-dialog
    :model-value="visible"
    title="批量停止Flink作业"
    width="700px"
    :before-close="handleClose"
    @update:model-value="$emit('update:visible', $event)"
  >
    <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
      <!-- 停止范围 -->
      <el-form-item label="停止范围" prop="stopScope">
        <el-radio-group v-model="form.stopScope">
          <el-radio label="all">停止所有运行中作业</el-radio>
          <el-radio label="module">仅停止指定模块作业</el-radio>
          <el-radio label="job">仅停止指定作业</el-radio>
          <el-radio label="failed">仅停止失败作业</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 模块选择 -->
      <el-form-item
        v-if="form.stopScope === 'module'"
        label="模块选择"
        prop="selectedModules"
      >
        <el-checkbox-group v-model="form.selectedModules">
          <el-checkbox
            v-for="module in availableModules"
            :key="module.moduleName"
            :label="module.moduleName"
          >
            {{ module.moduleName }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <!-- 作业选择 -->
      <el-form-item
        v-if="form.stopScope === 'job'"
        label="作业选择"
        prop="selectedJobs"
      >
        <el-checkbox-group v-model="form.selectedJobs">
          <el-checkbox
            v-for="job in runningJobs"
            :key="job.jobId"
            :label="job.jobId"
          >
            {{ job.jobName }} ({{ job.status }})
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <!-- 停止选项 -->
      <el-form-item label="创建SavePoint">
        <el-switch v-model="form.createSavepoint" />
      </el-form-item>

      <el-form-item label="重试次数" prop="retryCount">
        <el-input-number v-model="form.retryCount" :min="1" :max="10" />
      </el-form-item>

      <el-form-item label="重试间隔" prop="retryInterval">
        <el-input-number v-model="form.retryInterval" :min="1" :max="60" />
        <span class="ml-2">秒</span>
      </el-form-item>

      <!-- 确认信息 -->
      <el-alert
        v-if="getAffectedJobs().length > 0"
        title="即将停止以下作业:"
        type="warning"
        :closable="false"
        show-icon
      >
        <ul class="job-list">
          <li v-for="job in getAffectedJobs()" :key="job.jobId">
            • {{ job.jobName }} ({{ job.status }})
          </li>
        </ul>
      </el-alert>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="danger" @click="handleSubmit" :loading="loading">
          确认停止
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

interface FlinkJobBatchStopProps {
  visible: boolean
  onClose: () => void
  onSubmit: (config: any) => void
  availableModules: Array<{
    moduleName: string
    jobName: string
  }>
  runningJobs: Array<{
    jobId: string
    jobName: string
    status: string
  }>
}

const props = defineProps<FlinkJobBatchStopProps>()
const emit = defineEmits(['update:visible'])

const formRef = ref<FormInstance>()
const loading = ref(false)

const form = reactive({
  stopScope: 'all',
  selectedModules: [] as string[],
  selectedJobs: [] as string[],
  createSavepoint: true,
  retryCount: 3,
  retryInterval: 3
})

const rules: FormRules = {
  stopScope: [
    { required: true, message: '请选择停止范围', trigger: 'change' }
  ]
}

// 获取受影响的作业列表
const getAffectedJobs = () => {
  if (form.stopScope === 'all') {
    return props.runningJobs.filter(job => job.status === 'RUNNING')
  } else if (form.stopScope === 'module') {
    return props.runningJobs.filter(job => 
      form.selectedModules.some(module => 
        job.jobName.includes(module)
      )
    )
  } else if (form.stopScope === 'job') {
    return props.runningJobs.filter(job => 
      form.selectedJobs.includes(job.jobId)
    )
  } else if (form.stopScope === 'failed') {
    return props.runningJobs.filter(job => job.status === 'FAILED')
  }
  return []
}

// 监听visible变化
watch(() => props.visible, (newVal) => {
  if (newVal) {
    // 重置表单
    Object.assign(form, {
      stopScope: 'all',
      selectedModules: [],
      selectedJobs: [],
      createSavepoint: true,
      retryCount: 3,
      retryInterval: 3
    })
  }
})

const handleClose = () => {
  emit('update:visible', false)
  props.onClose()
}

const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    loading.value = true
    
    const config = {
      stopScope: form.stopScope,
      selectedModules: form.selectedModules,
      selectedJobs: form.selectedJobs,
      createSavepoint: form.createSavepoint,
      retryCount: form.retryCount,
      retryInterval: form.retryInterval
    }
    
    await props.onSubmit(config)
    handleClose()
  } catch (error) {
    console.error('表单验证失败:', error)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.ml-2 {
  margin-left: 8px;
}

.job-list {
  margin: 8px 0 0 0;
  padding-left: 20px;
}

.job-list li {
  margin: 4px 0;
}
</style> 